<template>
    <div id="gameType" style="width: 100%; height: 400px;"></div>
</template>

<script lang='ts' setup>

import { gameTypeYear } from "@/api/request/commendation/znlecharts";

import * as echarts from 'echarts/core';
import {
    DatasetComponent,
    DatasetComponentOption,
    TooltipComponent,
    TooltipComponentOption,
    GridComponent,
    GridComponentOption,
    LegendComponent,
    LegendComponentOption
} from 'echarts/components';
import { BarChart, BarSeriesOption } from 'echarts/charts';

import { CanvasRenderer } from 'echarts/renderers';
import {ref, onMounted } from "vue";

echarts.use([
    DatasetComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent,
    BarChart,
    CanvasRenderer
]);

type EChartsOption = echarts.ComposeOption<
    | DatasetComponentOption
    | TooltipComponentOption
    | GridComponentOption
    | LegendComponentOption
    | BarSeriesOption
>;
  

var option: EChartsOption;
const chartDom = ref<HTMLElement | null>(null);
const myChart = ref<echarts.ECharts | null>(null);

onMounted(()=>{
    chartDom.value = document.getElementById("gameType")!;
     myChart.value = echarts.init(chartDom.value);

    option = {
        legend: {},
        tooltip: {},
        dataset: {
            source: [
                ['product', '国家级', '省部级', '地市级', '校级']
            ]
        },
        xAxis: { type: 'category',
        name:'年份'
    },
        yAxis: {name:'数量'},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
    };

    option && myChart.value.setOption(option);
    getList();
})



const getList = () => {
    gameTypeYear().then((response: any) => {
        if (myChart.value && option) {
            option.dataset = response;
            myChart.value.setOption(option);
        }

    });
}
</script>

<style></style>